/
<template>
  <div class="payment-miniapp">
    <div class="payment-miniapp-tab tabs-box">
      <el-tabs
        v-model="activeName"
        type="border-card"
        @tab-click="tabClick"
      >
        <el-tab-pane
          label="订阅消息"
          name="SubscribeMessage"
        > </el-tab-pane>
        <el-tab-pane
          label="模版管理"
          name="SubscribeTemplate"
        > </el-tab-pane>
        <el-tab-pane
          label="触发设置"
          name="SubscribeTriggerSet"
        > </el-tab-pane>
      </el-tabs>
    </div>
    <SubscribeMessage v-if="activeName === 'SubscribeMessage'"></SubscribeMessage>
    <SubscribeTemplate v-if="activeName === 'SubscribeTemplate'"></SubscribeTemplate>
    <SubscribeTriggerSet v-if="activeName === 'SubscribeTriggerSet'"></SubscribeTriggerSet>
  </div>
</template>

<script>
import SubscribeMessage from './SubscribeMessage/index.vue'
import SubscribeTemplate from './SubscribeTemplate/index.vue'
import SubscribeTriggerSet from './SubscribeTriggerSet/index.vue'
export default {
  components: {
    SubscribeMessage,
    SubscribeTemplate,
    SubscribeTriggerSet
  },
  data() {
    return {
      activeName: 'SubscribeMessage'
    }
  },
  mounted() {
    this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '订阅推送', '订阅消息'])
  },
  methods: {
    tabClick() {
      if (this.activeName == 'SubscribeMessage') {
        this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '订阅推送', '订阅消息'])
      } else if (this.activeName === 'SubscribeTemplate') {
        this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '订阅推送', '模版管理'])
      } else if (this.activeName === 'SubscribeTriggerSet') {
        this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '订阅推送', '触发设置'])
      } else {

      }
    }
  }
}
</script>
<style>
.my-margin-left {
  margin-left: 20px;
}
</style>

<style lang="scss" scoped>
.bi-t .book_id {
  font-size: 12px;
}
.preserve-drawer {
  cursor: pointer;
}
.payment-miniapp {
  width: 100%;
}
.pagination {
  text-align: center;
  margin-top: 5px;
}
.pay-fans {
  font-weight: bold;
}
</style>

<style lang="scss">
.content-chart {
  .el-tabs__nav-wrap::after {
    background-color: transparent !important;
  }
}
.analysis-table {
  .cell {
    .el-table__expand-icon {
      vertical-align: top !important;
    }
    white-space: pre-line;
    .caret-wrapper {
      width: 10px;
    }
  }
  .el-table__body-wrapper {
    z-index: 2;
  }
  .table-pay-fans {
    font-weight: bold;
  }
  .tree-td {
    p {
      margin: 0;
    }
  }
}

.table-table {
  .ant-table-footer {
    padding: 8px;
    span {
      display: inline-block;
      width: 100px;
    }
  }
}
.pitcher-table {
  .el-table__row--level-1 {
    background: #eef5ff;
  }
  .el-table__row--level-2 {
    background: #f3fff9;
  }
}
.tabs-box .el-tabs__item.is-top.is-active {
  background-color: #eff3f9;
  border-top: 3px solid #06c021;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0 !important;
}
</style>
